<template>
  <div class="facility">
    <detail-section title="房屋设施">
      <template v-slot:content more="查看全部设施">
        <div class="facility-inner">
          <template v-for="(item, index) in houseFacilitys" :key="item.groupId">
            <div class="item-info">
              <div class="head">
                <img :src="item.icon" alt="">
                <div class="text">{{ item.groupName }}</div>
              </div>
              <div class="list">
                <template v-for="i in item.facilitys.slice(0, 4)" :key="i.orderIndex">
                  <div class="item">
                    <i class="icon_check icon" />
                    <span>{{ i.name }}</span>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>

      </template>
    </detail-section>
  </div>
</template>

<script setup>
import detailSection from "@/components/detail-section/detail-section.vue"
import { ref } from 'vue';
const props = defineProps({
  houseFacility: {
    type: Object,
    default: () => ({})
  }
})
const houseFacilitys = ref([])
for (const item of props.houseFacility.facilitySort) {
  houseFacilitys.value.push(props.houseFacility.houseFacilitys[item])
}

</script>

<style lang="less" scoped>
.facility {
  .facility-inner {
    padding: 5px 0;
    border-radius: 6px;
    font-size: 12px;
    background-color: #f7f9fb;

    .item-info {
      display: flex;
      margin: 25px 0;

      .head {
        width: 100px;
        text-align: center;

        img {
          width: 20px;
          height: 20px;
        }

        .text {
          margin-top: 5px;
          color: #000;
        }
      }

      .list {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .item {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          width: 50%;
          margin: 4px 0;

          .icon {
            margin: 0 6px;
          }


        }
      }
    }
  }
}
</style>